<template>
  <div id="app" ref="app">
    <!-- <div class="header-bg"></div> -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  watch: {
    '$route.path'(newVal, oldVal) {
      // 动态监测宽度变化
      const appStyle = this.$refs.app.style;
      if (/^\/login/.test(newVal)) {
        appStyle.paddingLeft = 0;
        appStyle.paddingRight = 0;
      } else {
        this.onresize();
      }
    }
  },
  mounted() {
    // console.warn(this.$utils);
    window.onresize = this.onresize;
  },
  methods: {
    onresize() {
      const appStyle = this.$refs.app.style;
      const wh = document.body.offsetWidth;
      const padding = (wh - 1280) > 0 ? (wh - 1280) / 2 : 0;
      appStyle.paddingLeft = `${padding > 100 ? 100 : padding}px`;
      appStyle.paddingRight = `${padding > 100 ? 100 : padding}px`;
    }
  }
};
</script>
<style lang="scss" scoped>
#app{
  .header-bg {
    width: 100vw;
    height: 213px;
    position: absolute;
    top: 0;
    left: 0;
    background: #307ec3;
  }
}
</style>
